<template>
  <div id="qianqichjgcsDetail" class="app-container">
    <div class="tupianShenCha" v-if="activeName=='1'">
      <div class="mapBox">
        <div
          class="mapBox_left"
          style="width:600px;height:600px;border: 1px solid #e9e9e9;border-right: none;"
        >
          <span v-show="loadIfram==1" class="iframeLoad">
            加载中
            <div class="el-icon-loading"></div>
          </span>
          <!-- <iframe :src="'http://49.4.89.238:7852/?url='+$https+mainData.statusMap.filePath" frameborder="0" style="width:100%;height:100%;"></iframe> -->
          <iframe
            v-show="loadIfram==2"
            id="wode"
            src="http://49.4.89.238:7852/?url=http://49.4.89.238:30000/mdrawins/browse/图件/现状图/莲花村片区片块7-1.dwg"
            frameborder="0"
            style="width:100%;height:100%;"
          ></iframe>
        </div>
        <tdMap style="height: 600px" :isShowControls="false" class="mapBox_right" ref="tdMap" :pkList="list" />
      </div>
      <div class="shenchaBox">
        <div class="shenchaBox_mainBox">
          <div class="shenchaBox_item">
            <p>问题类型：</p>
            <div class="shenchaBox_item_input">
              <el-select
                class="shenchaBox_item_input"
                @change="changeText"
                v-model="yijianValue"
                placeholder="--请选择--"
              >
                <el-option
                  v-for="item in cuowuList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="shenchaBox_item" v-if="isText">
            <p>问题内容：</p>
            <div class="shenchaBox_item_input">
              <el-input
                class="shenchaBox_item_input"
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
                v-model="yijianContent"
              ></el-input>
            </div>
          </div>
          <div class="shenchaBox_item shenchaBox_item_button">
            <el-button
              v-if="!params.isLook"
              type="primary"
              v-loading.fullscreen.lock="fullscreenLoading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)"
              @click="wentijilu"
              style="margin-right:10px;"
            >提交</el-button>
            <el-button @click="back">返回</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getLandStatusMapAuditInfo,
  getOpinionType,
  auditLandStatusMapInfo,
  auditLandStatusMap
} from "@/api/jungongcehuiResultFuShen";
import { getNormalOpinionType } from "@/api/getOpinion";
import tdMap from "@/components/tdMap";
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  components: {
    tdMap
  },
  data() {
    return {
      fullscreenLoading: false,
      yijianValue: "", //意见值
      yijianContent: "", //意见内容
      cuowuList: [], //错误类型数组
      loadIfram: 1,
      data: [
        {
          id: 1,
          label: "土地利用规划",
          children: [
            {
              id: 8,
              label: "总体规划"
            },
            {
              id: 9,
              label: "管理区规划"
            },
            {
              id: 10,
              label: "土地整治规划"
            }
          ]
        },
        {
          id: 2,
          label: "土地利用现状",
          children: [
            {
              id: 5,
              label: "2018年"
            },
            {
              id: 6,
              label: "2017年"
            }
          ]
        }
      ],
      activeName: "1",
      list: [],
      listLoading: true,
      listQuery: {
        page: 1,
        size: 10,
        projectId: 40
      },
      total: 0, //总数
      defaultProps: {
        children: "children",
        label: "label"
      },
      landId: "",
      mainData: "",
      mapConfig: {
        map: null,
        lng: 106.55,
        lat: 29.57,
        zoom: 10,
        lay: null
      },
      T: null,
      isText: true,
      params: "",
      isLook: ""
    };
  },
  created() {
    this.$store.dispatch("app/toggleSideBarByWx", false);
    this.landId = this.$route.query.id;
    this.params = this.$route.query;

    this.getData();
    this.getOpinionType();
  },
  destroyed() {
    this.$store.dispatch("app/toggleSideBarByWx", true);
  },
  methods: {
    changeText(v) {
      if (v == "NO_PROBLEM") {
        this.isText = false;
      } else {
        this.isText = true;
      }
    },
    //返回
    back() {
      this.$router.back(-1);
    },
    //问题记录
    wentijilu() {
      this.fullscreenLoading = true;
      var that = this;
      var data = {
        projectId: localStorage.getItem("projectId"),
        landId: this.landId,
        statusMapProblemType: this.yijianValue,
        statusMapProblemRecord: this.yijianContent
      };
      auditLandStatusMap(data).then(res => {
        this.fullscreenLoading = false;
        console.log(res);
        if (res.code == 1000) {
          this.$message({
            message: "提交成功",
            type: "success"
          });
          this.isText = true;
          setTimeout(function() {
            that.$router.back(-1);
          }, 1200);
        }
      });
    },
    //获取意见类型
    getOpinionType() {
      getNormalOpinionType().then(res => {
        console.log(res);
        this.cuowuList = res.data;
      });
    },
    getData() {
      var that = this;
      this.listLoading = true;
      var data = {
        landId: this.landId
      };
      getLandStatusMapAuditInfo(data).then(res => {
        this.mainData = res.data;
        this.list.push(res.data);
        this.filePath = res.data.statusMap.filePath;
        this.yijianValue = res.data.auditDto.statusMapProblemType;
        this.yijianContent = res.data.auditDto.statusMapProblemRecord;
        if (this.yijianValue == "NO_PROBLEM") {
          this.isText = false;
        } else {
          this.isText = true;
        }
        this.$nextTick(() => {
          var iframe = document.getElementById("wode");
          iframe.onload = function() {
            that.loadIfram = 2;
          };
        });
      });
    }
  }
};
</script>
<style scoped>
#qianqichjgcsDetail >>> .el-tabs__nav-wrap::after {
  height: 1px;
}
#qianqichjgcsDetail .mapBox {
  display: flex;
  margin-top: 30px;
  justify-content: center;
}
#qianqichjgcsDetail .mapBox_left {
  width: 10%;
  border: 1px solid #e9e9e9;
  border-right: none;
}
#qianqichjgcsDetail .mapBox_right {
  width: 800px;
}

#qianqichjgcsDetail .ditudanghang {
  background: #f2f2f2;
  height: 40px;
  border-bottom: 1px solid #e9e9e9;
  overflow: hidden;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #4d4d4d;
  line-height: 40px;
}
#qianqichjgcsDetail .fujianList {
  margin-top: 30px;
}
#qianqichjgcsDetail .fujianList_item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  margin-left: 30px;
}
#qianqichjgcsDetail .fujianList_item p {
  font-size: 14px;
  font-weight: bold;
  margin-right: 150px;
}
#qianqichjgcsDetail .dachuShenChaBox {
  position: relative;
}
#qianqichjgcsDetail .dachuShenCha {
  position: absolute;
  right: 0;
  top: -10px;
}
.iframeLoad {
  display: flex;
  font-size: 35px;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.shenchaBox {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.shenchaBox_item_input {
  width: 300px;
}
.shenchaBox_item_button {
  width: 300px;
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 50px;
}
</style>
